<template>
  <div>
    <van-nav-bar title="项目接收任务列表"/>
    <div class="tags-wrap">
      <van-tag v-for="(item,i) in tagsList" :key="item + i" plain type="success">{{item}}</van-tag>
    </div>
    <van-swipe-cell 
        v-for="(item, index) in tasklist"
        :key="item.assetsName + index"
        :left-width="60"
        :right-width="60"
      >
        <van-button square slot="left" type="primary" text="导出" @click="$router.push(`/layout/export/${index}`)" />
        <van-cell :border="false" :title="item.assetsName" is-link :to="`/listDetail/${index}`" />
        <van-button square slot="right" type="danger" text="删除" @click="levelItemClick(item, index)" />
      </van-swipe-cell>
      <div class="button-wrap">
        <van-button type="primary" @click="$router.push('/addTask')">添加项目</van-button>
      </div>
  </div>
</template>

<script>
import { getTaskList, removeTaskItem } from "@/utils/storage.js";
import vanNavBar from "vant/lib/nav-bar";
import "vant/lib/nav-bar/style";
import vanSwipeCell from "vant/lib/swipe-cell";
import "vant/lib/swipe-cell/style";
import vanCell from "vant/lib/cell";
import "vant/lib/cell/style";
import vanButton from "vant/lib/button";
import "vant/lib/button/style";
import vanTag from "vant/lib/tag";
import "vant/lib/tag/style";

export default {
  name: "home",
  components: {
    vanNavBar, vanSwipeCell, vanCell, vanButton, vanTag
  },
  data() {
    return {
      tasklist: [],
    };
  },
  computed: {
    tagsList() {
      // let arr = [];
      // for (let i = 0; i < this.tasklist.length; i++) {
      //   const level1 = this.tasklist[i].level1;
      //   if (!arr.some(t => t === level1)) {
      //     arr.push(level1);
      //   }
      // }
      // return arr;
      return ['农副业基地', '招接待所', '房地产'];
    }
  },
  created() {
    this.tasklist = getTaskList();
  },
  methods: {
    levelItemClick(item, index) {
      this.$dialog.confirm({
        title: '删除确认',
        message: '是否确定删除该项目？'
      }).then(() => {
        removeTaskItem(item, index);
        this.tasklist = getTaskList();
      }).catch(() => {});
    },
  }
};
</script>
<style lang="less" scoped>
.tags-wrap{
  padding: 10px 0 10px 15px;
  .van-tag{
    padding: 2px 5px 0;
    border-radius: 2px;
    line-height: 14px;
    height: 14px;
  }
  .van-tag+.van-tag{
    margin-left: 5px;
  }
}
  .button-wrap{
    text-align: center;
    padding: 10px 0;
    .van-button{
      width: 90%;
      border-radius: 10px;
    }
  }
</style>
